<template>
  <div class="pindao">
       <header class="header">
       <router-link to='sousuo'>
           <div class="left">
            <img src="../assets/img/SearchIcon.png" >
          </div>
       </router-link>
        
        <ul class="center">
        	<router-link to='zhibo'>
        		<li class="list">直播</li>
        	</router-link>
        	
        	<router-link to='pindao'>
        		<li class="list  active">频道</li>
            
        	</router-link>
        	
        	<router-link to='tuijian'>
        		
            <li class="list">推荐</li>
            
        	</router-link>
        	
        	<router-link to='dingyue'>
        		
            <li class="list">订阅</li>
        	</router-link>
            
           
            
        </ul>
        <div class="right">
            <img src="../assets/img/zhuboRight.png">
        </div>
    </header>
   
    <section class='section'>
        <ul class="nav">
            <li class="list">
                <span class="img"><img src="../assets/img/bangdan.png"></span>
                <span class="title">榜单</span>
            </li>
             <li class="list">
                <span class="img"><img src="../assets/img/tuokx.png"></span>
                <span class="title">同城</span>
            </li>
            <router-link to='huodong'>
              <li class="list">
                <span class="img"><img src="../assets/img/huomyx.png"></span>
                <span class="title">活动.专题</span>
              </li>  
            </router-link>
             
             <li class="list">
                <span class="img"><img src="../assets/img/huomyx.png"></span>
                <span class="title">火苗优选</span>
            </li>
             <li class="list">
                <span class="img"><img src="../assets/img/qinggan.png"></span>
                <span class="title">情感</span>
            </li>
             <li class="list">
                <span class="img"><img src="../assets/img/yule.png"></span>
                <span class="title">娱乐</span>
            </li>
             <li class="list">
                <span class="img"><img src="../assets/img/tuokx.png"></span>
                <span class="title">脱口秀</span>
            </li>
             <li class="list">
                <span class="img"><img src="../assets/img/yinyue.png"></span>
                <span class="title">音乐</span>
            </li>
            <li class="list">
                <span class="img"><img src="../assets/img/qinzi.png"></span>
                <span class="title">亲子</span>
            </li>
             <li class="list">
                <span class="img"><img src="../assets/img/wenhua.png"></span>
                <span class="title">文化</span>
            </li>
             <li class="list">
                <span class="img"><img src="../assets/img/ercy.png"></span>
                <span class="title">二次元</span>
            </li>
             <li class="list">
                <span class="img"><img src="../assets/img/yuyan.png"></span>
                <span class="title">语言</span>
            </li>
             <li class="list">
                <span class="img"><img src="../assets/img/guangbj.png"></span>
                <span class="title">广播</span>
            </li>
            
            <li class="list">
                <span class="img"><img src="../assets/img/keji.png"></span>
                <span class="title">汽车</span>
            </li>
             <li class="list">
                <span class="img"><img src="../assets/img/bangdan.png"></span>
                <span class="title">科技</span>
            </li>
             <li class="list">
                <span class="img"><img src="../assets/img/changsha.png"></span>
                <span class="title">长沙</span>
            </li>
             <li class="list">
                <span class="img"><img src="../assets/img/chengd.png"></span>
                <span class="title">成都FM</span>
            </li>
             <li class="list">
                <span class="img"><img src="../assets/img/guangz.png"></span>
                <span class="title">广州FM</span>
            </li>
            <li class="list">
                <span class="img"><img src="../assets/img/xiamen.png"></span>
                <span class="title">厦门站</span>
            </li>
            
            <li class="list">
                <span class="img"><img src="../assets/img/xiamen.png"></span>
                <span class="title">厦门站</span>
            </li>
        </ul>
        
    </section>
    
    
  </div>
</template>

<script>
export default {
  name: 'pindao',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import '.././assets/css/reset.css';    
@import '.././assets/less/style.less';
@import '.././assets/less/header.less';  
    .header{
        margin-bottom: 0;
    }
    .section{
        .nav{
            .webkit();
            .webkit();
            .px2rem(width,720);
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            .list{
               flex: 1;
                .webkit();
                justify-content: center;
                align-items: center;
                flex-direction: column;
                .margin(50,30,50,30);
                .img{
                    img{
                        .px2rem(width,100);
                        .px2rem(height,100);
                    }
                    
                   
                }
                .title{
                    display: block;

                    .margin-top(20);
                }
                
                
            }
        }
    }
    
</style>